<template>
    <div class="container">
        <!-- 给签到加上样式  -->
        <div class="imgs">
            <p>正常 <img src="@/assets/404_images/qidao.png" alt="" class="zhenchang"></p>
            <p>迟到 <img src="@/assets/404_images/chidao.png" alt="" class="chidao"></p>
            <p>缺勤 <img src="@/assets/404_images/queqing.png" alt="" class="queqin"></p>

        </div>
        <!-- 日历的样式 -->
        <div class="calendar-box">
            <el-calendar :range="['2022-08-01', '2022-08-31']">
                <template slot="dateCell" slot-scope="{ data }">
                    <div :class="data.isSelected ? 'is-selected' : ''">
                        <div class="btn-box">
                            <span>{{ data.day.split("-").slice(2).join("-") }}</span>
                            <p>
                            
                            </p>
                        </div>
                        <br />
                    </div>
                </template>>
            </el-calendar>
            <!--  -->
        </div>
        <!-- 考勤记录查看 -->
    </div>
</template>
<script>
import { getCanlList } from "@/api/calendar ";

export default {
    data() {
        return {

            // 打卡的数组
            timeArr: [
                {
                    "id": 203,
                    "userId": 2,
                    "deptId": 1,
                    "location": "116.397128#39.916527",
                    "type": 0,
                    "attendanceStatus": 0,
                    "time": "2022-08-06 08:33:00",
                    "status": 0,
                    "remark": null
                },
                {
                    "id": 205,
                    "userId": 2,
                    "deptId": 1,
                    "location": "116.397128#39.916527",
                    "type": 1,
                    "attendanceStatus": 3,
                    "time": "2022-08-06 17:56:00",
                    "status": 0,
                    "remark": null
                },
            ]
        };
    },
    methods: {
        downbtn(data) { },
        // 封装一个函数用于页面渲染
        timeFn() {
            // 声明一个数组用来存储月份
            // let monthArr = [1, 3, 5, 7, 8, 10, 12];
            var zhenchang = document.querySelector(".zhenchang")
            var chidao = document.querySelector(".chidao")
            var queqin = document.querySelector(".queqin")
            var text = document.querySelectorAll("tbody p");
            var spans = document.querySelectorAll(".calendar-box .el-calendar-table .el-calendar-day span")
            console.log(text);


        text[0].innerHTML += `<b>签到：</b>${this.timeArr[0].time} <br>
                            

                `
            // for (let i = 0; i < this.timeArr.length; i++) {
            //   console.log(this.timeArr.length);
            //   if (i >= 0 && i < 7) {

            //   } else if (i >= 7 && i < 14) {

            //   }
            // }
            // 遍历判断他是否迟到
        //     this.timeArr.forEach((item, index) => {
        //         if (item.day >= 10) {
        //             item.day = item.day
        //         } else {
        //             item.day = "0" + item.day
        //         }
        //         console.log(item.day)
        //         // 迟到
        //         if (item.signInDimension == 1) {
        //             // 遍历一下span的日期标签
        //             spans.forEach((items, index1) => {

        //             })
        //         }
        //         spans.forEach((items, index1) => {
        //             if (item.day == items.innerText) {
        //                 // spans[index].appendChild(chidao)
        //                 text[index].innerHTML = `<b class="btext">签到:</b>   ${item.signInTime}<br>
        //     <b class="btext">签退:</b>  ${item.signOutTime}
        //   `;
        //             }
        //         })
        //     })
            var btext = document.getElementsByClassName("btext")
            // btext.style.marginBottom = "10px"
            btext.forEach(item => {
                item.style.cssText = "margin-bottom:10px;display:inline-block"
                item.style.display = "inlineBlock"
            })
            console.log(btext)

        },
    },
    created() {
        let obj = {
            month: 8
        };
        getCanlList(obj).then((res) => {
            this.timeArr = res.data;
            console.log(this.timeArr);
            console.log(res)
            this.timeFn();
        });
        this.timeFn()
    },
};
</script>
<style lang="scss">
.calendar-box {
    width: 100%;

    .el-calendar-table .el-calendar-day {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 5px;
        height: 150px;

        span {
            display: block;
            // padding: 10px;
            margin-top: 5px;
            // color: rgb(176, 176, 176);
            
        }
    }
}
</style>
<style lang="scss" scoped>
.is-selected {
    color: #1989fa;
}

.btn-box {
    position: relative;
    height: 30px;

    p {
        width: 100px;
        position: absolute;
        left: 5px;
        top: 55px;
    }

    span {
        position: absolute;
        right: 5px;
        top: 10px;
        color: skyblue;
        
    }
}

.imgs {
    display: flex;
    position: absolute;
    left: calc(50% - 165px);
    top: -10px;

    p {
        // width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        font-size: 12px;
        padding: 20px;
        color: tomato;
        

        img {
            height: 30px;
            width: 30px;
        }
    }
}
</style>